import React, { useState, useEffect } from "react"
import "./AnswerCard.css"
import instance from "../../utils/instance"

function AnswerCard(props) {
    const [question, setQuestion] = useState({})
    useEffect(() => {
        let answerId = props.answer.questionId
        instance.get(`/question/${answerId}`).then(data => {
            if (data.data.errno === 0) {
                setQuestion(data.data.data)
            }
        })
    }, [props.answer])
    const gotoQuestion = (e) => {
        if (question._id) {
            window.location.href = `#/question/${question._id}`
        }
    }
    return (
        <div className="answer_card">
            <div className="answer_card_head">
                <p>{props.answer.updatedAt.split("T")[0]}</p>
                <span>{props.answer.voteCount}人觉得很赞</span>
            </div>
            <div className="answer_card_main">
                <p>{props.answer.content}</p>
            </div>
            <div className="answer_card_origin">
                <p onClick={(e) => { gotoQuestion(e) }}>回答来源: {question.title ? question.title : ""}</p>
            </div>
        </div>
    )
}

export default AnswerCard